<template>
<div class="app">
    <div class="app-header">
      <m-header></m-header>
    </div>
    <div class="app-main">
      <router-view></router-view>
    </div>
    <div class="app-tabbar">
      <router-view name="mfooter"></router-view>
    </div>
  </div>
</template>

<script>
import MHeader from './components/MHeader'
export default {
  name: 'app',
  components: {
    MHeader
  }
}
</script>

<style lang="scss">
html,
body {
  height: 100%;
  overflow: hidden;
}
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2;

  &-main {
    flex: 1;
    overflow-x: hidden;
  }

  &-header {
    height: 45px;
  }
}
</style>
